<template>
  <div class="content">
    <el-form
      class="form"
      label-width="200px"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm">
      <el-form-item label="Name" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="ruleForm.email" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="Phone Number" prop="phone">
        <el-input v-model="ruleForm.phone" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="Gender" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="Female"></el-radio>
          <el-radio label="Male"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="Country" prop="country">
        <el-select
          clearable
          v-model="ruleForm.country"
          placeholder="——select——">
          <el-option
            v-for="item in countryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="I work or study at">
        <el-input v-model="ruleForm.workOrstudy"></el-input>
      </el-form-item>
      <!-- <el-form-item label="I use SISU AA mainly for">
                <el-input v-model="ruleForm.sisu"></el-input>
            </el-form-item> -->

      <el-form-item label="I use SISU AA mainly for">
        <el-select clearable v-model="ruleForm.sisu" placeholder="——select——">
          <el-option
            label="Study of linguistics, social science or humanities"
            value="Study of linguistics, social science or humanities"></el-option>
          <el-option
            label="Research of IT, AI or NLP"
            value="Research of IT, AI or NLP"></el-option>
          <el-option label="Other" value="Other"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="btn">
      <el-button @click="onSubmit('ruleForm', 1)">Modify</el-button>
      <!-- <el-button @click="onSubmit('ruleForm', 2)">Save</el-button> -->
    </div>
  </div>
</template>

<script>
import { country } from '@/utils/country'
import { modify_userinfo } from '@/api/login.js'
export default {
  data() {
    return {
      countryList: country,
      ruleForm: {
        name: '',
        email: '',
        phone: '',
        gender: '',
        country: '',
        workOrstudy: '',
        sisu: ''
      },
      rules: {
        name: [
          { required: true, message: 'Please enter a name', trigger: 'blur' }
        ],
        // email: [
        //     { required: true, message: '请输入名称', trigger: 'blur' },
        // ],
        // phone: [
        //     { required: true, message: '请输入名称', trigger: 'blur' },
        // ],
        gender: [
          { required: true, message: 'Please enter gender', trigger: 'blur' }
        ],
        country: [
          { required: true, message: 'Please enter a country', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    listenUserInfo() {
      return this.$store.state.saveUserInfo
    }
  },
  watch: {
    listenUserInfo: {
      handler(cur, old) {
        // console.log('cur', cur)
        const { email, name, country, gender, institute, phone, purpose } =
          cur || {}
        // const { email, name } = this.$store.state.loginSucInfo
        // cur.email = email
        // cur.name = name
        this.ruleForm = {
          name,
          email,
          phone,
          gender,
          country,
          workOrstudy: institute,
          sisu: purpose
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onSubmit(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const newObj = {
            ...this.ruleForm,
            institute: this.ruleForm.workOrstudy,
            purpose: this.ruleForm.sisu
          }
          this.$store.commit('handleSaveUserInfo', newObj)

          if (type == 2) {
            this.$message.success('Personal information is successfully saved')
          }

          if (type == 1) {
            modify_userinfo(newObj)
              .then((res) => {
                const { code, message } = res || {}
                if (code == 200) {
                  this.$message.success(
                    'The personal information is successfully modified'
                  )
                } else {
                  this.$message.warning(`${message}`)
                }
              })
              .catch((err) => {
                console.log('err', err)
              })
          }
        } else {
          // console.log('请 把表单填写完整 ！！');
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;

  .form {
    .el-form-item {
      display: flex;

      /deep/.el-input__inner {
        width: 300px !important;
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;

    margin-left: 220px;

    button {
      width: 150px;
    }

    button:nth-child(1) {
      color: #fff;
      background-color: #f6be98;
    }

    button:nth-child(2) {
      color: #fff;
      background-color: #b7d6a3;
      margin-left: 50px;
    }
  }
}

/deep/.el-form-item__content {
  margin-left: 20px !important;
}
</style>
